﻿<!DOCTYPE HTML PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
<head lang="en">
    <title>Mqtt</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <!--<meta http-equiv="Cache-Control" content="no-siteapp" />-->
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="alternate icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="/scripts/amazeui/amazeui.min.css" />
    <link rel="stylesheet" href="../css/main.css" />
    <script src="/scripts/jquery-3.3.1.min.js"></script>
    <script src="/scripts/amazeui/amazeui.min.js"></script>

    <script src="/scripts/jquery.signalR-2.4.1.min.js"></script>
    <style>
        .list {
            width: 1000px !important;
        }

        .am-form {
            width: 100%;
            background: #fff;
        }

        .refresh-port {
            width: 80px !important;
            height: 30px !important;
        }

        #msg, #msgWrite {
            clear: both;
        }

        .am-u-sm-4 {
            padding: 3px;
        }
    </style>
    <script type="text/javascript">
        var hostid;// 主机id
        var clientid;// 客户端id

        function startHost() {
            var args = $('#txtHostArgs').val();
            dds.iot.com.open({
                type: 'mqttHostCom',//mqtt主机
                port: 1,
                baudRate: 1,
                extendData: args,
                //extendData: JSON.stringify({ server: "*", port: 1883 }),
                onReceive: function (res) {
                    addMsg('host:' + JSON.stringify(res.data))
                    console.log('host', res.data)
                },
                onOpen: function (ar) {
                    if (ar.Success) {
                        hostid = ar.Data;
                        addMsg('连接成功！')
                    } else {
                        alert(ar.Message)
                    }
                }
            })
        }
        function closeHost() {
            dds.iot.com.close(hostid)
        }
        function startClient() {
            var args = $('#txtClientArgs').val();
            dds.iot.com.open({
                type: 'mqttClientCom',//mqtt客户端
                port: 1,
                baudRate: 1,
                extendData: args,
                //extendData: JSON.stringify({ server: "localhost", port: 1883, clientid: "1", username: "", password:""}),
                onReceive: function (res) {
                    addMsg('client:' + JSON.stringify(res.data))
                    console.log('client',res.data)
                },
                onOpen: function (ar) {
                    if (ar.Success) {
                        clientid = ar.Data;
                        addMsg('连接成功！')
                    } else {
                        alert(ar.Message)
                    }
                }
            })
        }
        function subscribe() {
            var topic = $('#txtTopic').val();
            dds.iot.com.exeCommand({ id: clientid, name: "Subscribe", data: { topic: topic, level: 0 } }, function (ar) {
                if (ar.Success) {
                    addMsg('订阅成功！')
                } else {
                    addMsg('操作失败：' + ar.Message)
                }
            })
        }
        function publish() {
            var topic = $('#txtTopic').val();
            var contents = $('#txtContents').val();
            dds.iot.com.exeCommand({ id: clientid, name: "Publish", data: { topic: topic, data: contents } }, function (ar) {
                if (ar.Success) {
                    addMsg('发布成功！')
                } else {
                    addMsg('操作失败：' + ar.Message)
                }
            })
        }
        function closeClient() {
            dds.iot.com.close(clientid)
        }
        var $msg;
        function addMsg(msg) {
            $msg.val($msg.val()+"\n"+msg);
        }
        function clearLog() {
            $msg.val('');
        }
        // 窗口初始化事件（操作窗口大小、标题）
        $(document).bind('dds.window.init', function (e, win) {
            $msg = $("#msg");
        })
    </script>

</head>

<body>
    <div class="fun_bd" style="padding:10px;">
        <form class="am-form">
            <h3>数据读取</h3>
            <fieldset>
                <div class="am-form-group">
                    <label for="doc-ipt-email-1" class="am-u-sm-4">主机参数</label>
                    <div class="am-u-sm-6">
                        <input id="txtHostArgs" type="text" value='{ server: "*", port: 1883 }' />
                    </div>
                    <button onclick="startHost()" class="am-btn-primary" type="button">启动主机</button>
                    <button onclick="closeHost()" class="am-btn-danger" type="button">关闭主机</button>
                </div>
                <div class="am-form-group">
                    <label for="doc-ipt-email-1" class="am-u-sm-4">客户端参数</label>
                    <div class="am-u-sm-6">
                        <input id="txtClientArgs" type="text" value='{ server: "localhost", port: 1883, clientid: "1", username: "", password:""}' />
                    </div>
                    <button onclick="startClient()" class="am-btn-primary" type="button">启动客户端</button>
                    <button onclick="closeClient()" class="am-btn-danger" type="button">关闭客户端</button>
                </div>
                <div class="am-form-group">
                    <label for="doc-ipt-email-1" class="am-u-sm-4">主题</label>
                    <div class="am-u-sm-6">
                        <input id="txtTopic" type="text" value="/dds/iot/mqtt/test" />
                    </div>
                    <button onclick="subscribe()" class="am-btn-primary" type="button">订阅主题</button>
                </div>
                <div class="am-form-group">
                    <label for="doc-ipt-email-1" class="am-u-sm-4">主题内容</label>
                    <div class="am-u-sm-6">
                        <input id="txtContents" type="text" value="测试测试" />
                    </div>
                    <button onclick="publish()" class="am-btn-primary" type="button">发布主题</button>
                </div>

                <!--<div id="msg"></div>-->
                <textarea id="msg" rows="18"></textarea>
                <div class="am-form-group">
                    <button onclick="clearLog()" class="am-btn-default" type="button">清除日志</button>
                </div>
            </fieldset>
        </form>
    </div>

</body>

</html>